Harmonic sequences display

var sequence_F = [
    ['P1','m','I','T'],['P4','m','IV','SD'],['P5','','V','d'],['P1','m','I','T','up'],
    ['P1','7','V7/IV','D2'],['P4','','IV','SD'],['P5','','V7','D'],['P1','','I','T']
];

Only harmonic functions: @

<div id="sequence_F" class="harmonic-sequence">@</div>

<div id="sequence_FT" class="harmonic-sequence transposable">@</div>

Harmonic functions + degrees: !

<div id="sequence_F" class="harmonic-sequence">!</div>

<div id="sequence_F" class="harmonic-sequence transposable">!</div>

Harmonic functions + degrees + signatures: $

<div id="sequence_F" class="harmonic-sequence">$</div>

<div id="sequence_F" class="harmonic-sequence transposable">$</div>

Harmonic functions + degrees + colored signatures: $%

<div id="sequence_F" class="harmonic-sequence">$%</div>

<div id="sequence_F" class="harmonic-sequence transposable">$%</div>

Harmonic functions + degrees + chords: tone

<div id="sequence_F" class="harmonic-sequence">A</div>

<div id="sequence_F" class="harmonic-sequence transposable">A</div>

Harmonic functions + degrees + colored chords: tone%

<div id="sequence_F" class="harmonic-sequence">A%</div>

<div id="sequence_FT" class="harmonic-sequence transposable">A%</div>

'up' separation

var sequence_A = [
    ['P1','','I','T','up'],
    ['P1','','V','d'],['P4','','I','T','up'],
    ['P1','','V','d'],['P4','m','I','T','up'],
    ['P1','','IV','SD'],['P5','','I','T','up'],
    ['P1','','bVI','SD'],['M3','m','I','T','up']
];
<div id="sequence_A" class="harmonic-sequence"></div>

var sequence_AT = sequence_A;
<div id="sequence_A" class="harmonic-sequence transposable"></div>

'br' line break

var sequence_B = [
    ['P5','7','V7','D'],['P1','','I','T'],['P5','7','V7','D'],['P1','','I','T','br'],
    ['P5','7','V7','D'],['P1','','I','T'],['P5','7','V7','D'],['P1','','I','T']
];
<div id="sequence_B" class="harmonic-sequence"></div>

var sequence_BT = sequence_B;
<div id="sequence_BT" class="harmonic-sequence transposable"></div>

'up' and 'br' together

var sequence_C = [
    ['P1','°','VII','D'],['m2','','I','T','br'],
    ['P1','°','VII','D'],['m2','m','I','T','up'],
    ['P1','°','II','SD'],['m7','m','I','T','br'],
    ['P1','°','II','SD'],['m7','m','I','T']
];
<div id="sequence_C" class="harmonic-sequence"></div>

var sequence_CT = sequence_C;
<div id="sequence_CT" class="harmonic-sequence transposable"></div>

Highlight 'color|background'

var sequence_D = [
    ['P1','','I','T','black|#ddffdd'],
    ['M2','m','II','SD','black|#ffffcc'],
    ['M3','m','III','d','black|#ffffcc'],
    ['P4','','IV','SD','black|#ddffdd'],
    ['P5','','V','d','black|#ddffdd'],
    ['M6','m','VI','t','black|#ffffcc'],
    ['M7','°','VII','D','black|#FFEFCC']
];
<div id="sequence_D" class="harmonic-sequence"></div>

var sequence_DT = sequence_D;
<div id="sequence_DT" class="harmonic-sequence transposable"></div>

Highlight automatic color '%'

var sequence_E = [
    ['P1','','I','T','%'],
    ['M2','m','II','SD','%up'],
    ['M3','m','III','d'],
    ['P4','','IV','SD','up%'],
    ['P5','','V','d','white|red'],
    ['M6','m','VI','t','white|gray'],
    ['M7','°','VII','D']
];
<div id="sequence_E" class="harmonic-sequence"></div>

var sequence_ET = sequence_E;
<div id="sequence_ET" class="harmonic-sequence transposable"></div>